<template>
  <div class="shopping_box">
    <el-table
      :data="tableData"
      @selection-change="handleSelectionChange"
      class="shopTable"
      empty-text="暂未选购商品"
      height="60vh"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column label="商品名称" show-overflow-tooltip>
        <template slot-scope="scope">
          <div class="table_img">
            <img :src="scope.row.imageUrl" alt="" />
            <p>{{ scope.row.name }}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="订购价(￥)" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.price }}
        </template>
      </el-table-column>
      <el-table-column label="数量" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-input-number
            v-model="scope.row.num"
            :min="1"
            :max="999999"
            step-strictly
            label="请输入"
          ></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="settlement">
      应付金额： ￥<span>{{ totalPrice }}</span>
      <div>去结算</div>
      <div style="background-color: red;" @click="batchDelete">删除</div>
    </div>
  </div>
</template>

<script>
import { getOrderByUserId,delOrderBatch,placeAnOrder } from '@/api/order'
export default {
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      totalPrice: 0,
      userInfo: this.$store.getters.userInfo
    };
  },
  methods: {
    queryList(){
      getOrderByUserId({customerId:this.userInfo.id}).then(res=>{
        this.tableData = res.data.result || []
        this.totalPrice = res.data.total
        this.current
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleDelete(index,row){
      this.toDelete([row.id])
    },
    batchDelete(){
      if(!this.multipleSelection.length){
        this.$message.info('请选择要删除的数据')
      }
      this.toDelete(this.multipleSelection.map(item=> item.id))
    },
    toDelete(ids){
      delOrderBatch({ids}).then(res=>{

      })
    },
    placeOrder(){
      placeAnOrder({customerId:this.userInfo.id,orderIds: this.multipleSelection.map(item=> item.id)}).then(res=>{
        console.log(res,'order')
      })
    }
  },
};
</script>
<style lang="scss" scoped>
.shopping_box {
  .shopTable {
    width: 80vw;
    margin: 15px auto;
    .table_img {
      display: flex;
      align-items: center;
      img {
        width: 80px;
        height: 80px;
        margin-right: 10px;
      }
      p {
        // width: 15vw;
        width: calc(100% - 80px);
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical; // 从上到下垂直排列子元素
        -webkit-line-clamp: 2; // 显示两行内容
      }
    }
  }
  .settlement {
    width: 80vw;
    margin: 15px auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #e7e7e7;
    span {
      font-weight: 800;
    }
    div {
      height: 50px;
      background-color: #5e8677;
      color: white;
      line-height: 50px;
      padding: 0 20px;
      margin-left: 15px;
    }
  }
}
</style>
